<template>
	<view class="page-content">
		<view class="bg_fff pd-20">
			<view class="incomeInfo pd-20 display_col_center">
				<view class="de_income">
					<view class="display_col_center" style="flex: 1;">
						<view class="pre">
							<text>￥</text>
							<text style="font-weight: 600;">{{collect?collect.tamount:0}}</text>
						</view>
						<text class="c_999999 f_24">收益</text>
					</view>
					<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="60%"></u-line>
					<view class="display_col_center" style="flex: 1;">
						<view class="pre">
							<text>￥</text>
							<text style="font-weight: 600;">{{collect?collect.tcount:0}}</text>
						</view>
						<text class="c_999999 f_24">订单数</text>
					</view>
					<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="60%"></u-line>
					<view class="display_col_center" style="flex: 1;">
						<view class="pre">
							<text>￥</text>
							<text style="font-weight: 600;">{{collect?collect.tordercount:0}}</text>
						</view>
						<text class="c_999999 f_24">成单数</text>
					</view>
				</view>
			</view>
			<!-- <view class="display_row_btn_center mt-20">
				<uni-datetime-picker v-model="time" type="daterange" @change="timeChange" />
			</view> -->

			<view class="dSLComVueTop">
				<view class="dSLComVueTopLeft">
					<u-icon name="search"></u-icon>
					<input class="dSLComVueTopLeftInput" v-model="subData.keyword" type="text"
						:placeholder="placeholder" confirm-type="search" @confirm="ok" />
				</view>
				<view class="dSLComVueTopRight">
					<view class="display_row_btn_center" @click="searchList">
						<text class="c_C62B2C f_28">筛选</text>
					</view>
				</view>
			</view>
		</view>

		<u-list v-if="dataList.length" @scrolltolower="listScrollTolower" :customStyle="{
			flex:'1',
			marginBottom: '20rpx',
			paddingTop:'20rpx'
			}" height="0px">
			<keyword-order-item :dataItem="item" v-for="(item, index) in dataList" :key="index">
			</keyword-order-item>
		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>
	</view>
</template>

<script>
	import {
		getPlatform,
		getKeywordOrder,
		getKeywordOrderCollect,
	} from '@/config/api.js'

	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	export default {
		data() {
			return {
				array: [],
				time: [getDate({
					format: true
				}), getDate({
					format: true
				})],
				curIndex: 0,
				subData: {
					flag: 'all',
					order_create_at: "",
					mission_id: "",
					page: 1,
					pages: 1,
					type: "",
					keyword: ""
				},
				collect: null,
				dataList: [],
				showTime: true
			}
		},
		onLoad(op) {
			var date = getDate({
				format: true
			});
			this.subData.mission_id = op.id;

			if (op.create_at) {
				this.showTime = false;
				this.subData.order_create_at = op.create_at;
				this.subData.type = op.type;
			} else {
				this.time = [date, date];
				this.subData.order_create_at = date + " - " + date;
			}

			// this.getPlatforms();
			this.getList();
			this.getCollect();
		},
		methods: {
			searchList() {
				this.dataList = [];
				this.subData.page = 1;
				this.subData.pages = 1;
				this.getList();
			},
			getPlatforms() {
				getPlatform().then((res) => {
					this.array = res;
					this.subData.flag = res[0].flag;
				}).catch((err) => {

				});
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			typeChange(e) {
				this.dataList = [];
				this.subData.page = 1;
				this.subData.pages = 1;
				this.curIndex = e.detail.value;
				this.subData.flag = this.array[e.detail.value].flag;
				this.getCollect();
				this.getList();
			},
			timeChange(e) {
				this.dataList = [];
				this.subData.page = 1;
				this.subData.pages = 1;
				this.subData.order_create_at = e[0] + " - " + e[1];
				this.getCollect();
				this.getList();
			},
			getList() {
				getKeywordOrder(this.subData).then((res) => {
					this.dataList = this.dataList.concat(res.list);
					this.subData.pages = res.page.pages;
					this.subData.page++;
				}).catch((err) => {

				});
			},
			listScrollTolower() {
				if (this.subData.page <= this.subData.pages) {
					this.getList();
				}
			},
			getCollect() {
				getKeywordOrderCollect(this.subData).then(res => {
					this.collect = res;
				})
			}
		}
	}
</script>

<style scoped>
	.incomeInfo {
		background: url("https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/Layer%201%20%E6%8B%B7%E8%B4%9D.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.incomeBtn {
		padding: 10rpx 20rpx;
		background-color: #131F4F;
		border-radius: 10rpx;
		width: 120rpx;
	}

	.now {
		font-size: 40rpx;
	}

	.now>text:last-child {
		font-size: 60rpx;
		font-weight: 600;
	}

	.pre {
		font-size: 30rpx;
	}

	.pre>text:last-child {
		font-size: 40rpx;
	}

	.income {
		justify-content: flex-end;
		align-items: flex-end;
	}

	.de_income {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.timebox {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		border: 1px solid #999;
		border-radius: 10rpx;
	}

	.timebox>text {
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}

	.typebox {
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid #e5e5e5;
		height: 37px;
		width: 160rpx;
		text-align: center;
		line-height: 35px;
		margin-right: 20rpx;
	}

	/deep/ .typebox {
		color: #666;
	}

	.dSLComVueTop {
		width: 96%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	.dSLComVueTopLeft {
		flex: 1;
		height: 60rpx;
		background-color: #e8e8e8;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 3%;
		border: 1rpx solid #f2f2f2;
	}

	.dSLComVueTopLeftInput {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.dSLComVueTopRight {
		width: 80rpx;
		margin-left: 10rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
